<div class="layui-colla-item" >
    <h2 class="layui-colla-title">add</h2>
    <div class="layui-colla-content " >
        <div class="layui-row">
            <div class="layui-card">
            <div class="layui-card-header layui-bg-gray layui-bottom">
                <button type="button" class="layui-btn layui-btn-xs  add-add-line" ><i class="layui-icon">&#xe654;</i>添加一行</button>
                <button type="button" class="layui-btn layui-btn-xs  update-add-table" >更新表字段</button>
            </div>
            <div class="layui-card-body layui-nopadding add-list">
                <table class="layui-table layui-nomargin">
                    <colgroup>
                      <col width="6%">
                      <col width="8%">
                      <col width="6%">
                      <col width="6%">
                      <col width="5%">
                      <col width="1%">
                      <col width="5%">
                      <col width="1%">
                      <col width="10%">
                      <col width="5%">
                      <col width="1%">
                    </colgroup>
                    <thead> 
                        <tr>
                            <th >标题</th>
                            <th >字段名</th>
                            <th >控件类型</th>
                            <th>引入html</th>
                            <th >placeholder</th>
                            <th >是否显示</th>
                            <th >显示类型</th>
                            <th >是否唯一</th>
                            <th >显示项</th>
                            <th >默认值</th>
                            <th >操作</th>
                        </tr>
                    </thead>
                    <tbody id="add-sort">
                    </tbody>
                </table>
            </div>
            </div>
        </div>
    </div>
</div>
<script src="__STATIC__/js/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript">
;!function(){
    var fixHelper = function(e, ui) {
        ui.children().each(function() {
            $(this).width($(this).width()); //在拖动时，拖动行的cell（单元格）宽度会发生改变。在这里做了处理就没问题了
        });
        return ui;
    };
    $( "#add-sort" ).sortable({
        opactiy:0.6,
        revert:true,
        axis: 'y',
        helper: fixHelper,
        cursor:"move",
        start:function(e, ui){
            ui.item.css({"background":"#696969"}); //拖动时的行，要用ui.helper
            return ui;
        },
        stop:function(e, ui){
            var res = new Object();
            var n = 1;
            $('#add-sort tr').each(function(i){ // 遍历 tr
                var a = $(this).children();//获取每一行
                var arr =a[1].innerText;//取得第三列的值
                res[arr] = n;
                n++;
            });
            resData1 = JSON.stringify(res);
            ui.item.css({"background":"#fff"});
            return ui;
        },
        update:function(e, ui){
                var new_sort = [];
                $("#add-sort").find('.key').each(function(i){
                    $(this).val(i);
                    new_sort.push($(this).val());
                });
            }
    });
    //显示数据
    $.ajax({
        url:"{:cmf_plugin_url('ModuleConfig://table_config/getConfig')}?tag=add",
        type: 'post',
        data:$('#search-form').serialize(),
        success:function(data){
            if (data.code == 1) {
                var tables = $('.add-list tbody');
                var input_type = {:json_encode($input_type)}; //控件类型
                var htms = {:json_encode($html)}; //html选择
                $.each(data.data,function(k,v){
                    //控件类型
                    var ctp = '<select name="form[add][fields]['+k+'][ctrl_type]">';
                    $.each(input_type,function(a,b){
                        if (a == v.ctrl_type) {
                            var s = 'selected';
                        } else {
                            var s = '';
                        }
                        ctp += '<option value="'+a+'" '+s+'>'+b+'</option>';
                    })
                    ctp += '</select>';
                    //引入html选择
                    var ht = '<select name="form[add][fields]['+k+'][html]"><option value="" >无</option>';
                    $.each(htms,function(a,b){
                        var bs = b.add;
                        if (bs == null) {
                            return true;
                        }
                        if (b.name == v.html) {
                            var s = 'selected';
                        } else {
                            var s = '';
                        }
                        ht += '<option value="'+b.name+'" '+s+'>'+b.name+'</option>';
                    })
                    ht += '</select>';
                    //开关状态
                    if (v.is_show == 1) {
                        d = 'checked';
                    } else {
                        d = '';
                    }
                    //唯一状态
                    var sole = '';
                    if (v.is_sole == 1) {
                        sole = 'checked';
                    }
                    //关联状态
                    if (v.is_relevance == 1) {
                        rel = 'checked';
                    } else {
                        rel = '';
                    }
                    //显示类型
                    var show_type = '<select name="form[add][fields]['+k+'][show_type]">';
                    if (v.show_type == 1) {
                        show_type += '<option value="" >无</option><option value="1" selected>查表</option><option value="2" >固定内容</option><option value="3" >多选项</option>';
                    } else if (v.show_type == 2) {
                        show_type += '<option value="" >无</option><option value="1" >查表</option><option value="2" selected>固定内容</option><option value="3" >多选项</option>';
                    } else if (v.show_type == 3) {
                        show_type += '<option value="" >无</option><option value="1" >查表</option><option value="2" >固定内容</option><option value="3" selected>多选项</option>';
                    } else {
                        show_type += '<option value="" selected>无</option><option value="1" >查表</option><option value="2" >固定内容</option><option value="3" >多选项</option>';
                    }
                    show_type += '</select>';
                    //判断是否是主表字段
                    var is_t = '';
                    var is_del = '';
                    if (v.is_table == 1) {
                        is_t = 'readonly="readonly" style="color:red"';
                        is_del = ''
                    } else {
                        is_t = '';
                        is_del = '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="deletetr(this)" title="移除后请点击保存"><i class="layui-icon">&#xe640;</i></button>';
                    }
                    var html = $(
                        '<tr>'+
                        '<td><input type="text" name="form[add][fields]['+k+'][title]" class="layui-input" value="'+v.title+'"></td>'+
                        '<input class="key" type="hidden" name="form[add][fields]['+k+'][sort]" value="'+v.sort+'">'+
                        '<td><input type="text" name="form[add][fields]['+k+'][field]" class="layui-input" value="'+v.field+'" '+is_t+'"></td>'+
                        '<td>'+ctp+'</td>'+
                        '<td>'+ht+'</td>'+
                        '<td><input type="text" name="form[add][fields]['+k+'][placeholder]" class="layui-input" value="'+v.placeholder+'"></td>'+
                        '<td>'+
                            '<input type="hidden" name="form[add][fields]['+k+'][is_show]" value="2">'+
                            '<input type="checkbox" name="form[add][fields]['+k+'][is_show]"  lay-skin="switch" '+d+' lay-text="ON|OFF" value="1">'+
                        '</td>'+
                        '<td>'+show_type+'</td>'+
                        '<td>'+
                            '<input type="hidden" name="form[add][fields]['+k+'][is_sole]" value="2">'+
                            '<input type="checkbox" name="form[add][fields]['+k+'][is_sole]"  lay-skin="switch" '+sole+' lay-text="ON|OFF" value="1">'+
                        '</td>'+
                        '<td>'+
                            '<textarea placeholder="请输入内容" name="form[add][fields]['+k+'][option]" onchange="checkjson(this)" class="layui-textarea">'+v.option+'</textarea>'+
                        '</td>'+
                        '<td>'+
                            '<input type="text" name="form[add][fields]['+k+'][default]" class="layui-input" value="'+v.default+'">'+
                        '</td>'+
                        '<td>'+
                            is_del+
                        '</td>'+
                    '</tr>'
                    );
                    html.appendTo(tables);
                    form.render();
                })
            }
        }
    });
  var layer = layui.layer
    ,form = layui.form;
    var common_n = 'fsadfdsaf';
    var i = 100;
    //添加一行
    $('.add-add-line').on('click',function(){
        if (common_n.length > 0){
            var tables = $('.add-list tbody');
            var html = $(
                '<tr>'+
                '<td><input type="text" name="form[add][fields]['+i+'][title]" class="layui-input"></td>'+
                '<td><input type="text" name="form[add][fields]['+i+'][field]" class="layui-input"></td>'+
                '<td>'+
                    '<select name="form[add][fields]['+i+'][ctrl_type]">'+
                        '<foreach name="input_type" item="ty" key="k">'+
                            '<option value="{$k}">{$ty}</option>'+
                        '</foreach>'+
                    '</select>'+
                '</td>'+
                '<td>'+
                    '<select name="form[add][fields]['+i+'][html]">'+
                        '<foreach name="html" item="ty" key="k">'+
                            '<option value="">无</option>'+
                            '<option value="{$ty.name}">{$ty.name}</option>'+
                        '</foreach>'+
                    '</select>'+
                '</td>'+
                '<td><input type="text" name="form[add][fields]['+i+'][placeholder]" class="layui-input"></td>'+
                '<td>'+
                    '<input type="hidden" name="form[add][fields]['+i+'][is_show]" value="2">'+
                    '<input type="checkbox" name="form[add][fields]['+i+'][is_show]"  lay-skin="switch"  lay-text="ON|OFF" value="1">'+
                '</td>'+
                '<td>'+
                    '<select name="form[add][fields]['+i+'][show_type]">'+
                        '<option value="">无</option>'+
                        '<option value="1">查表</option>'+
                        '<option value="2">固定内容</option>'+
                        '<option value="3">多选项</option>'+
                    '</select>'+
                '</td>'+
                '<td>'+
                    '<input type="hidden" name="form[add][fields]['+i+'][is_sole]" value="2">'+
                    '<input type="checkbox" name="form[add][fields]['+i+'][is_sole]"  lay-skin="switch" lay-text="ON|OFF" value="1">'+
                '</td>'+
                '<td>'+
                    '<textarea placeholder="请输入内容" name="form[add][fields]['+i+'][option]" onchange="checkjson(this)" class="layui-textarea"></textarea>'+
                '</td>'+
                '<td>'+
                    '<input type="text" name="form[add][fields]['+i+'][default]" class="layui-input" >'+
                '</td>'+
                '<td>'+
                    '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="deletetr(this)" title="移除后请点击保存"><i class="layui-icon">&#xe640;</i></button>'+
                '</td>'+
            '</tr>'
            );
            html.appendTo(tables);
            i+=1;
            form.render();
        } else {
            layer.msg('请填写内容！',{icon:2,time:1000});
        }
    })
    $('.update-add-table').on('click',function(){
        let url = "{:cmf_plugin_url('ModuleConfig://table_config/update')}?tag=add";
        $.ajax({
            url:url,
            type:'post',
            data:$('#search-form').serialize(),
            success:function(data){
                if (data.code == 1) {
                    layer.msg(data.msg,{icon:1,time:1500},function(){
                        window.location.reload();
                    })
                } else {
                    layer.msg(data.msg,{icon:2,time:1500});
                }
            }
        })
    })
}();
function deletetr(t){
    $(t).parent().parent().remove();
}
//检查是否json格式
function checkjson( _this )
{
    $.ajax({
        url:"{:cmf_plugin_url('ModuleConfig://table_config/checkJson')}",
        data:{val:$(_this).val()},
        type:'post',
        success:function(data){
            if (data.code != 1) {
                layer.msg(data.msg,{icon:2,time:1500});
            } else {
            }
        }
    })
}
</script>
